<!DOCTYPE html>
<html>    

<head>        
    <meta charset="UTF-8">      
      <title>日历</title>      
      <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .canlender {
            width: 1000px;
            height: 530px;
            margin: 0 auto;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        table.bgtable thead tr th {
            height: 30px;
        }

        table.bgtable tbody tr td {
            height: 100px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: right;
            vertical-align: top;
            padding: 4px;
        }

        table.bgtable tbody tr td.gray {
            color: gray;
            background: #DDDDDD;
        }
    </style>  
      </head>    

<body>      
    <div class="canlender" id="canlender">      
             <div class="tablebox1">            
                <table class="bgtable">               
                     <thead>            
                                <tr>                            
                        <!--汉字表头-->                
                                    <th v-for="(item,index) in daynamearr">{{item}}</th>         
                                       </tr>            
                            </thead>            
                        <tbody>               
                             <tr v-for="week in theweek()">                        
                            <td v-for="item in week" :class="{'gray': item.prevmonth || item.nextmonth}">{{item.day}}</td>           
                                     </tr>                  
                      </tbody>               
                 </table>         
               </div>    

    </div id="appc">  
    <m-calendar :child="date0"></m-calendar>
    <m-calendar :child="date1"></m-calendar>

    <div>


    </div>

    <div id="appdd">
            <div class="fl">
                <h2>自定义的下拉框</h2>
                <custom-select btn-value="查询" v-bind:list="list1"></custom-select>
            </div>
         
            <div class="fl">
                <h2>第二个下拉框</h2>
                <custom-select btn-value="go" v-bind:list="list2"></custom-select>
            </div>
        </div>
        



      
</body>    


<script src="../js/vue.js" type="text/javascript" charset="utf-8"> </script>    







<script type="text/javascript">      

    Vue.component("mCalendar", {
        props: ["child"],
        data: function () {
            return {
                open: false,
                value: this.child.now,
                datatop: "",
                datalist: [],
                year: "",
                month: ""
            }
        },
        methods: {
            showCalendar: function () {
                this.open = !this.open;
                if (this.open) {
                    if (this.value) {
                        this.value = this.child.now.replace(/-/g, "/");
                    } else {
                        this.value = new Date().getFullYear() + '/' + (Number(new Date().getMonth()) + 1) + '/' + new Date().getDate();
                    };
                    if (this.isDate()) {
                        this.setDateInfo();
                    };
                };
            },
            setDateInfo: function (dates) {
                dates = dates || this.value;
                var Dates = new Date(dates);
                this.year = Dates.getFullYear();
                this.month = Dates.getMonth() + 1;
                var day = Dates.setDate(1);
                var week = new Date(day).getDay();
                var num = new Number;
                if (this.month == 2) {
                    num = this.year % 100 == 0 ? (this.year % 400 == 0 ? 29 : 28) : (this.year % 4 == 0 ? 29 : 28);
                } else if (this.month == 1 || this.month == 3 || this.month == 5 || this.month == 7 || this.month == 8 || this.month == 10 || this.month == 12) {
                    num = 31;
                } else {
                    num = 30;
                };
                this.datalist = [];
                for (var i = 1; i <= (num + week); i++) {
                    if (i > week) {
                        var one = new Array;
                        one.push(this.year);
                        one.push(this.zeroFill(this.month));
                        one.push(this.zeroFill(i - week));
                        var start = this.child.start ? this.child.start.split("-") : 0;
                        start = this.zeroFill(start[0]) + '/' + this.zeroFill(start[1]) + '/' + this.zeroFill(start[2]);
                        start = new Date(start);
                        var end = this.child.end ? this.child.end.split("-") : 0;
                        end = this.zeroFill(end[0]) + '/' + this.zeroFill(end[1]) + '/' + this.zeroFill(end[2]);
                        end = new Date(end);
                        var now = new Date(one.join("/"));
                        var className = "";
                        if (one[0] == new Date(this.value).getFullYear() && one[1] == new Date(this.value).getMonth() + 1 && one[2] == new Date(this.value).getDate()) {
                            className += "on ";
                        };
                        if (now < start || now > end) {
                            className += 'disabled';
                            one = [];
                        };
                        this.datalist.push({ "className": className, "num": (i - week), "date": one.join("-") });
                    } else {
                        this.datalist.push({ "className": "disabled", "num": "", "date": "" });
                    };
                };
                this.datatop = '<span class="top_month">' + this.getMonthText(this.month) + '</span><span class="top_year">' + this.year + '</span>';
            },
            clickDate: function (type, day, dates) {
                switch (type) {
                    case 1:
                        this.setDateInfo((this.year - 1) + "/" + this.month + "/" + 1);
                        break;
                    case 2:
                        this.setDateInfo((this.month - 1 == 0 ? this.year - 1 : this.year) + "/" + (this.month - 1 == 0 ? 12 : this.month - 1) + "/" + 1);
                        break;
                    case 3:
                        this.setDateInfo((this.month + 1 == 13 ? this.year + 1 : this.year) + "/" + (this.month + 1 == 13 ? 1 : this.month + 1) + "/" + 1);
                        break;
                    case 4:
                        this.setDateInfo((this.year + 1) + "/" + this.month + "/" + 1);
                        break;
                    case 5:
                        if (day) {
                            this.child.now = day;
                            this.showCalendar();
                            this.child.callback && this.child.callback(day);
                        };
                        break;
                    default:
                        break;
                }
            },
            isDate: function () {
                var num = this.value.split("/");
                if (num.length == 3 && !isNaN(num[0]) && !isNaN(num[1]) && !isNaN(num[2])) {
                    return true;
                };
                return false;
            },
            zeroFill: function (num) {
                num = Number(num);
                num = num < 10 ? "0" + num : num;
                return num;
            },
            getMonthText: function (m) {
                var month = '';
                switch (m) {
                    case 1:
                        month = "一月";
                        break;
                    case 2:
                        month = "二月";
                        break;
                    case 3:
                        month = "三月";
                        break;
                    case 4:
                        month = "四月";
                        break;
                    case 5:
                        month = "五月";
                        break;
                    case 6:
                        month = "六月";
                        break;
                    case 7:
                        month = "七月";
                        break;
                    case 8:
                        month = "八月";
                        break;
                    case 9:
                        month = "九月";
                        break;
                    case 10:
                        month = "十月";
                        break;
                    case 11:
                        month = "十一月";
                        break;
                    case 12:
                        month = "十二月";
                        break;
                };
                return month;
            }
        },
        template: '<p class="m_calender">' +
            '<input class="date_input" click="showCalendar" readonly="readonly" type="type" v-model="child.now">' +
            '</p><p class="date_main" v-if="open">' +
            '</p><p class="date_top">' +
            '' +
            '' +
            '</p><p v-html="datatop"> </p>' +
            '' +
            '' +
            '<p></p>' +
            '<p class="date_week">' +
            '<em>日</em>' +
            '<em>一</em>' +
            '<em>二</em>' +
            '<em>三</em>' +
            '<em>四</em>' +
            '<em>五</em>' +
            '<em>六</em>' +
            '</p>' +
            '<p class="date_day"><em :class="s.className" click="clickDate(5,s.date)" v-for="s in datalist">{{ s.num }}</em></p>' +
            '<p class="date_mask" click="showCalendar"> </p>' +
            '<p></p>' +
            '<p></p>'
    });


    kim = new Vue({
        el: "#appc",
        data: {
            date0: {
                now: "2017-11-05",
                end: "2017-11-25",
                callback: function (d) {
                    kim.date1.start = d;//两个组件间互相关联
                }
            },
            date1: {
                now: "2017-11-25",
                start: "2017-11-05",
                callback: function (d) {
                    kim.date0.end = d;
                }
            }
        }
    });



    Vue.component("custom-select", {         //可小驼峰可烤串
        data: function () {                     //data为function,返回私有对象
            return {
                selectShow: false,
                val: ''
            };
        },
        props: ["btnValue", 'list'],                  //此处必须(小)驼峰
        template: `<section class="list">
            <div class="searchIpt">
            <div class="clearFix">
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" v-bind:value="btnValue">
            <span></span>
            </div>
            <custom-list v-show="selectShow" v-bind:aaa="list" v-on:receive="changeValueHandle"
            ></custom-list>
            </div>
            </section>`,
        methods: {
            changeValueHandle(item) {
                this.val = item;    //需要this
            }
        }

    })
    Vue.component('custom-list', {
        props: ["aaa"],                        //传自定义属性名
        template: `<ul>
               <li v-for="item of aaa" @click="selectValueHandle(item)">{{item}}</li>
            </ul>`,
        methods: {
            selectValueHandle(item) {
                this.$emit('receive', item)   //$emit告诉父级发生的（自定义）事件，v-on在父组件绑定（自定义）事件
            }
        }
    })
    var data = {
        list1: ['吃饭', '睡觉', '剁手'],
        list2: ['111', '123', '233']
    }
    new Vue({
        el: '#appdd',
        data:  {
            list1:['吃饭','睡觉','剁手'],
            list2:['111','123','233']
        }
    })




    var app = new Vue({
        el: "#canlender",
        data: {
            daynamearr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],                //本月的本期构成 
            dayarr: [],
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
        },
        mounted: function () {
            //需要知道这个月的第一天是星期几           
            var themonth1stday = (new Date(this.year, this.month - 1, 1)).getDay();
            console.log(themonth1stday)//           
            alert(themonth1stday)                //本月有多少天，这个月的最后一天就是下个月的最后一天减去一毫秒        
            var y = this.month == 12 ? this.year + 1 : this.year;
            var m = this.month == 12 ? 1 : this.month;
            var themonthdaysamount = new Date(new Date(y, m, 1) - 1).getDate();
            console.log(themonthdaysamount)                //上个月有多少天    
            var prevmonthlastday = new Date(new Date(this.year, this.month - 1, 1) - 1).getDate();
            console.log(prevmonthlastday)//            
            alert(prevmonthlastday)
            while (themonth1stday-- > 0) {
                this.dayarr.unshift({
                    "day": prevmonthlastday--,
                    "prevmonth": true
                });
            };
            //本月的日期               
            var count = 0;
            while (themonthdaysamount--) {
                this.dayarr.push({
                    "day": ++count
                });
            }
            var c = 35 - this.dayarr.length;
            var count2 = 1
            while (c-- > 0) {
                this.dayarr.push({
                    "day": count2++,
                    "nextmonth": true
                });
            }
        },
        methods: {
            theweek: function () {
                var _arr = [];
                for (var i = 0; i < 5; i++) {
                    var _week = [];
                    for (var j = 0; j < 7; j++) {
                        _week.push(this.dayarr[i * 7 + j]);
                    } _arr.push(_week)
                }
                return _arr
            }
        }
    })  
</script>

</html>